<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta id="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta name="apple-themes-web-app-capable" content="yes">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <meta content="email=no" name="format-detection">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>
    <link rel="stylesheet" href="${s.base}/mobile/css/main.css" type="text/css" media="all">
    <link rel="stylesheet" href="${s.base}/mobile/css/weui.min.css" type="text/css" media="all">
    <link rel="stylesheet" href="${s.base}/mobile/css/jquery-weui.min.css" type="text/css" media="all">
    <style type="text/css">
        /*底部购买*/
        #bug_div{height:3.86rem;overflow: hidden; text-align: center; width:100%; margin:0 auto; z-index:98; position:fixed; bottom:0; left:0px; background-color:#F8F8F8; border-top:1px solid #CCC;}
        #bug_div .home_foot_b{background:#cccccc;border-top:1px solid #eeeeee; }
        #bug_div .bug_top,.bug_center{width:100%;}
        #bug_div .bug_top .bug_left{ float:left; width:20%;height:50px; text-align:right; }
        #bug_div .bug_top .but_content{width:60%;float:left;height:50px; }
        #bug_div .bug_top .but_content .but_content_title{ font-size:16px; line-height:30px; color:#000; width:100%;}
        #bug_div .bug_top .but_content .but_content_desc{font-size:14px; line-height:20px; color:#3e3e3e; width:100%;}
        #bug_div .bug_top .bug_right{width:20%;float:left;height:50px; text-align:center;}
        #bug_div .bug_top .bug_right img{ width:30px; height:30px; background-color:#F8F8F8;}

        #bug_div .bug_center .bug_left{ float:left; width:29%;height:40px; text-align:right; margin-right:1%; }
        #bug_div .bug_center .but_content{width:40%;float:left;height:40px; }
        #bug_div .bug_center .bug_right{width:29%;float:left;height:40px; text-align:left; margin-left:1%;}
        #bug_div .bug_center .but_content input{ width:100%;;height:30px; font-size:16px; border:1px solid #CCC;}
        #bug_div .bug_center .bug_left input{ width:40px;height:30px; font-size:16px; border:1px solid #CCC; border-radius:5px;}
        #bug_div .bug_center .bug_right input{ width:40px;height:30px; font-size:16px; border:1px solid #CCC; border-radius:5px;}

        #bug_div .bug_bottom{width:60%;height:30px; text-align:center; margin-left:20%; }
        #bug_div .bug_bottom input{ float:left; width:20%;height:30px;font-size:16px; border:1px solid #CCC; border-radius:5px; margin-left:5%; }
        #bug_div .bug_title{width:60%;height:20px; text-align:center; margin-left:20%; font-size:14px; line-height:20px; color:#3e3e3e;}
        #bug_div .bug_title span{color:#F00;}

        #bug_div .bug_btn{width:60%;height:50px; text-align:center;  margin-left:20%; clear:both; }
        #bug_div .bug_btn input{width:100%;height:35px; text-align:center; margin-top:30px; font-size:0.28rem; color:#fff; display:inline-block; background-color:#d91d37; border:1px solid #d91d37; border-radius:5px;  }
        .home_foot{width: 100%;}
        .home_foot #qindanBtn{width: 25%;float: left;background: #09bb07;}
        .home_foot #buyBtn{width: 100%;float: left; }

        .tooltips{position:relative;width:100%;height:115px;line-height:60px;background:#F9F9F9;border:1px solid #ebebeb;border-radius:4px;margin-top:5px;}
        .arrow{position:absolute;width: 0px;height:0px;line-height: 0px;border-width: 0 10px 15px ;border-style: solid dashed dashed dashed;border-left-color: transparent;border-right-color: transparent;}
        .arrow-border{color: #F9F9F9;top:-10px;left: 5%;}
        .arrow-bg{color: #F9F9F9;top:-10px;left: 5%;}
        .liuliang{width:99%;height:115px;color:#000;padding-left:1%;}
        .liuliang .liuliang_title{width:100%;height:28px;line-height:28px;font-size:12px;}
        .liuliang .liuliang_content{width:100%;}
        .liuliang .liuliang_content .liuliang_content_left{width:30%;text-align:left;float:left;}
        .liuliang .liuliang_content .liuliang_content_left img{width:80px;height:80px;}
        .liuliang .liuliang_content .liuliang_content_right{width:70%;text-align:left;float:left;}
        .liuliang .liuliang_content .liuliang_content_right .liuliang_content_right_font{width:100%;text-align:left;font-size:12px;line-height:20px;}
        .inner-box{color: #000;}
    </style>
</head>

<body>

<!--页面加载 开始-->
<!--<div id="preloader">
<div id="status">
 <p class="center-text"><span>拼命加载中···</span></p>
</div>
</div>-->
<!--页面加载 结束-->
<div id="content_div_b" class="p_bottom">
    <!--产品轮播-->
    <div class="top_pic">
        <div class="left_i" onclick="history.back();"></div>
        <!--banner图开始-->
        <div class="xyg-banner swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="${flowDesc.image}" /></div>
            </div>
            <div class="swiper-pagination"></div>
        </div>
        <!--banner图结束-->
    </div>
    <!--产品轮播结束-->

    <div class="cp_mian">
        <h2>${item.title}</h2>
        <!--<p class="f_bt">【宣传副标题】参与10人次，中奖机率高出10倍</p>-->
        <div class="tooltips">
            <div class="liuliang" onclick="window.location.href='/phone/selectProduct?productId=${activity.id}&memberId=${memberId}'">
                <div class="liuliang_title">购买以下流量礼包即可参与商品专享活动</div>
                <div class="liuliang_content">
                    <div class="liuliang_content_right_font">流量礼包</div>
                    <div class="liuliang_content_right_font">${flowDesc.priceDesc}</div>
                    <div class="liuliang_content_right_font">${flowDesc.discount}</div>
                    <div class="liuliang_content_right_font">声明：最终解释权归所有</div>
                </div>
            </div>
            <div class="arrow arrow-border"></div>
            <div class="arrow arrow-bg"></div>
        </div>

    </div>
</div>

<div id="payPasswordShow" style="display: none;">
    <div class="but_content">
        <input type="text" id="payPassword" value=""/>
    </div>
</div>

<!--底部购买-->
<div id="bug_div" style="display: none;">
    <div class="bug_top">
        <div class="bug_left"></div>
        <div class="but_content">
            <div class="but_content_title">
                选择购买数量
            </div>
            <div class="but_content_desc">
                (单位M)
            </div>
        </div>
        <div class="bug_right">
            <img src="${s.base}/mobile/images/chose_c.png" id="deleteBtn" onclick="deleteBug()"/>
        </div>
    </div>
    <div  class="bug_center">
        <div class="bug_left">
            <input type="button" onclick="jian()" id="jianBtn" value="-"/>
        </div>
        <div class="but_content">
            <input type="number" id="num" value="1"/>
        </div>
        <div class="bug_right">
            <input type="button" onclick="jia()" id="jiaBtn" value="+"/>
        </div>
    </div>
    <!--<div  class="bug_bottom">
        <input type="button" onclick="bugInput(this)" data-value="5" value="5"/>
        <input type="button" onclick="bugInput(this)" data-value="10" value="10"/>
        <input type="button" onclick="bugInput(this)" data-value="100" value="100"/>
        <input type="button" onclick="bugInput(this)" data-value='${activity.totalNum-activity.readyNum}' value="包尾"/>
    </div>-->
    <!--<div  class="bug_title">
        共<span id="showMoney">${item.price}</span>个钻石
    </div>-->
    <div class="bug_btn">
        <input type="button" id="winNum" onclick="winNum()" value="确定"/>
    </div>
</div>
<!--底部购买结束-->

<!--底部-->
<div id="foot_div">
    <div class="home_foot">
        <a id="buyBtn" onclick="buyBug()" href="javascript:void(0)">立即参与</a>
    </div>
</div>
<!--底部结束-->
<script type="text/javascript" src="${s.base}/mobile/js/jquery.min.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/jquery-weui.min.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/swiper.min.js"></script>

<script type="text/javascript" src="${s.base}/mobile/js/common.js"></script>
<script type="text/javascript" src="${s.base}/js/layer/layer.js"></script>
<script type="text/javascript" src="${s.base}/mobile/js/passwordBox.min.js"></script>
<script type="text/javascript" src="${s.base}/js/base/commont.js"></script>
<script>
    $(".xyg-banner").swiper({
        loop: true,
        autoplay: 3000
    });

    /***************支付方法****************/
    function payMethod(memberId,payPassword,activityId,num){
        var flowId = '${flowDesc.id}';
        if(payPassword == null || payPassword == ""){
            layer.alert("您必须先设置支付密码！");
            return false;
        }
        /**
         * init传入参数依次是：正确密码(传空时不对比输入是否正确),密码键盘背景，标题，副标题
         * */
        PwdBox.init(payPassword,'/mobile/images/pwd_keyboardw.png','请输入支付密码','安全支付环境，请放心使用！');
        /**
         *res格式：{status:'true或false',password:'用户输入的密码'}
         *
         */
        PwdBox.show(function(res){
            var password=res.password;
            if(res.status){
                $.post("/member/updateFlowNumEntity",{
                    memberId : memberId,
                    /*activityId : activityId,
                    flowId : flowId,*/
                    flowNum : num
                },function(result){
                    if (result.returnInfo.state == '1'){
                        showLayerAlertNoRefre("购买成功！请联系管理领取奖励！");
                    } else {
                        showLayerAlertNoReload(result.returnInfo.errorMsg);
                    }
                },"json");
            }else{
                //重置输入
                layer.alert('密码不正确，请重新输入！');
                //关闭并重置密码输入
                PwdBox.reset();
                resultNum(num);

            }
        });
    };
    /****************************************/


    function buyBug() {
        $("#foot_div").hide();
        $("#bug_div").show();
    };
    function deleteBug() {
        $("#bug_div").hide();
        $("#foot_div").show();
    };

    function bugInput(obj) {
        resultNum($(obj).attr("data-value"));
    }
    function jia() {
        if($("#num").val()*1>0){
            resultNum($("#num").val()*1+1);
        }else{
            resultNum(1);
        }
    }
    function jian() {
        if ($("#num").val() * 1 > 1) {
            resultNum($("#num").val() * 1 - 1);
        } else {
            resultNum(1);
        }
    };
    var itemId = '${item.id}';
    var price = '${item.price}';
    var personNum = '${item.personNum}';
    var memberId = '${memberId}';
    var payPassword = '${payPassword}';
    function resultNum(value) {
        $("#num").val(value);
        $("#showMoney").html(personNum*1*value);
    }
    var activityId = '${activity.id}';

    function winNum() {
        var mem = getCookie('memberId');
        var minPurchaseNum = '${item.minPurchaseNum}';
        var memberMoney = '${member.money}';
        var num = $("#num").val();
        if(Number(num) <= 0){
            layer.alert("您必须输入流量额度");
            return false;
        }
        payMethod(memberId,payPassword,activityId,num);
    }

</script>
</body>

</html>